<template>
  <!--参加练习-->
  <view class="practiceList flex flex-column">
    <!-- 历史练习列表存在tab -->
    <Navbar :tabList="navList" v-if="isHistory" class="step-navbar" style="margin-bottom: 14px;" :selectVal="navbarVal"
      @updateVal="navbarClick" ref="Navbar">
    </Navbar>
    <view class="search fs_0">
      <u--input placeholder="请输入关键字" prefixIcon="search" prefixIconStyle="font-size: 26px;color: #999999"
        customStyle="height: 30px;border:1px solid #F2F2F2;border-radius:12px" clearable v-model="keyword"
        @change="searchChange"></u--input>
    </view>

    <view class="f_1">
      <empty v-if="!isLoading && !list.length"></empty>
      <scroll-view scroll-y style="height: 100%" lower-threshold="60" @scrolltolower="scrolltolower"
        class="list-wrapper" v-if="!isLoading && list.length">
        <view v-for="(item, index) in list" :key="index" class=" item flex flex-row" @click="itemClick(item)">
          <image :src="item.coverUrl" class="fs_0" />
          <view class="info f_1 flex flex-column around">
            <view class="flex flex-row between">
              <text class="f_1 title">{{ item.practiceName }}</text>
              <view class="fs_0 flex flex-row item-center">
                <text>查看</text>
                <u-icon name="arrow-right" size="12"></u-icon>
              </view>
            </view>
            <view>
              {{ item.startTime }}-{{ item.endTime }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <AnswerLoginKey ref="AnswerLoginKey" @success="keyCheckSuccess"></AnswerLoginKey>
  </view>
</template>

<script>
import _ from 'lodash';
import Empty from "@/improve/components/common/Empty.vue";
import AnswerLoginKey from "./components/AnswerLoginKey.vue";
import Navbar from "../components/Navbar.vue";
import { getPublishExercises, pageUpgPracticeHistory } from "@/improve/services";

export default {
  name: "practiceList",
  components: { AnswerLoginKey, Empty, Navbar },
  data() {
    return {
      isHistory: false,
      navList: [
        { text: "每日一练", value: 1 },
        { text: "在线练测", value: 2 },
        { text: "知识竞赛", value: 3 },
        { text: "有奖答题", value: 4 }
      ],
      keyword: "", // 关键字搜索
      navbarVal: 1, // 当前选中的tab
      isLoading: false,
      list: [],
      practiceType: 1,
      pageNo: 1,
      pageTotal: 0
    }
  },
  onLoad(options) {
    this.practiceType = options.practiceType
    this.isHistory = options.isHistory
    const title = this.navList.find(i => i.value == this.practiceType)?.text
    wx.setNavigationBarTitle({
      title: this.isHistory ? '历次练习' : title
    });
  },
  onShow() {
    this.getCurrentList()
  },
  methods: {
    navbarClick(val) {
      if (val === this.navbarVal) return
      this.navbarVal = val
      this.list = []
      this.pageNo = 1
      this.getHistoryList()
    },
    scrolltolower() {
      if (this.pageNo < this.pageTotal) {
        this.pageNo++;
        this.getCurrentList()
      }
    },
    //搜索
    async searchChange() {
      this.getCurrentList()
    },
    getCurrentList() {
      this.isHistory ? this.getHistoryList() : this.getList()
    },
    getList: _.debounce(async function () {
      const res = await getPublishExercises({
        pageNo: this.pageNo,
        pageSize: 10,
        queryKey: this.keyword,
        type: this.practiceType
      })
      this.list = this.pageNo === 1 ? res.datas : [...this.list, ...res.datas]
    }),
    getHistoryList: _.debounce(async function () {
      console.log(this.navbarVal)
      const res = await pageUpgPracticeHistory({
        pageNo: this.pageNo,
        pageSize: 10,
        queryKey: this.keyword,
        type: this.navbarVal
      })
      this.list = this.pageNo === 1 ? res.datas : [...this.list, ...res.datas]
    }),
    itemClick(item) {
      if (item.loginSet === 1) {
        this.$refs.AnswerLoginKey.open(item)  //校验密钥
        return
      }
      uni.navigateTo({
        url: `/improve/join/practiceDetail?upgPracticeUuid=${item.uuid}&practiceType=${item.practiceType}&type=${this.isHistory ? 'history' : ''}`,
      })
    },
    //校验密钥通过
    keyCheckSuccess(item) {
      uni.navigateTo({
        url: `/improve/join/practiceDetail?upgPracticeUuid=${item.uuid}&practiceType=${item.practiceType}&type=${this.isHistory ? 'history' : ''}`,
      })
    },
  }
}
</script>
<style scoped lang="scss">
.practiceList {
  height: calc(100vh - 10px - env(safe-area-inset-bottom) - 16px);
  background-color: #FFFFFF;
  padding: 16px 16px 0 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));

  ::v-deep .Navbar {
    justify-content: space-between;

    .tabIconStyle {
      margin-right: 0;
    }
  }

  .search {
    margin-bottom: 25px;
  }

  empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item {
    background-color: #F9F9F9;
    border-radius: 12px;

    &+.item {
      margin-top: 16px;
    }

    image {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      background-size: cover;
      margin-right: 16px;
    }

    .info {
      color: #666666;
      font-size: 12px;

      .title {
        color: #333333;
        font-size: 16px;

        text {
          margin-right: 2px;
        }
      }
    }
  }

  ::v-deep .u-popup__content {
    width: 100vw;
    max-height: 85vh;
  }
}
</style>